<template>
  <div class="top-slider" :class="isFixed ? 'fixed-slider' : ''">
    <li>
      <img
        src="https://yanxuan.nosdn.127.net/static-union/166020791894cf1d.png"
        alt=""
      />
    </li>
    <li>
      <p><span>扫码领</span><br />APP大额<br />新人礼包</p>
    </li>
    <li>
      <i class="kefu iconfont icon-kefu"></i>
      <p class="service">在线客服</p>
    </li>
    <li v-if="isFixed" @click="toTop" class="li-top">
      <span class="iconfont icon-huidingbu top"></span>
      <p>回顶部</p>
    </li>
  </div>
</template>
<script lang="ts">
  export default {
    name: "WTopSlider",
  };
</script>
<script setup lang="ts">
  type Props = {
    isFixed: boolean;
  };
  defineProps<Props>();
  const toTop = () => {
    window.scrollTo(0,0)
  };
</script>
<style scoped lang="less">
  .top-slider {
    position: absolute;
    right: 0;
    top: 650px;
    color: #666;
    background-color: #fff;
    li {
      text-align: center;
      padding: 2px;
      img {
        width: 70px;
        height: 70px;
      }
      .service {
        font-size: 14px;
      }
      .kefu {
        font-size: 35px;
      }
      p {
        font-size: 12px;
        text-align: center;
        line-height: 15px;
        color: #b63a3d;
        span {
          color: #333;
        }
        padding-bottom: 18px;
        border-bottom: 1px solid #e7e7e7;
        margin-bottom: 10px;
      }

      .top + p {
        margin-top: 10px;
        color: #333;
        margin-bottom: 0;
      }
    }
    li:last-child p {
      border: none;
    }
  }
  .fixed-slider {
    position: fixed;
    top: 200px;
  }
  .li-top{
    cursor: pointer;
  }
</style>
